<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet" type="text/css" media="all">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/reset.min1.css">
    <style>
        body{
            /* set background tensile */
            background-color: #222222;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            color: #464646;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            margin: 0;
            padding: 0;
        }
        #content{
            background-color: rgba(255, 255, 255, 0.95);
            width: 420px;
            height: 300px;
            border: 1px solid #000000;
            border-radius: 6px;
            padding: 10px;
            margin-top: 15%;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .login-header{
            width: 100%;
            height: 48px;
            margin-bottom: 20px;
            border-bottom: 1px solid #dcdcdc;
        }
        .login-header img{
            width: 180px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .login-input-box{
            margin-top: 12px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
        }
        .login-input-box input{
            width: 360px;
            height: 32px;
            margin-left: 18px;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            padding-left: 42px;
        }
        .login-input-box input:hover{
            border: 1px solid #f8b100;
        }
        .login-input-box input:after{
            border: 1px solid #f8b100;
        }
        p.tip span {
            padding-left: 40px;
            font-size:10px;
            font-weight:bold;
            color:#f8b100;
        }
        .login-input-box .icon{
            width: 24px;
            height: 24px;
            margin: 6px 4px 6px 24px;
            background-color: #f3c300;
            display: inline-block;
            position: absolute;
            border-right: 1px solid #dcdcdc;
        }
        .login-input-box .icon.icon-user{
            background: url("../images/user1.png");
        }
        .login-input-box .icon.icon-password{
            background: url("../images/password1.png");
        }
        .remember-box{
            width: auto;
            height: auto;
            margin-left: 18px;
            margin-top: 12px;
            font-size: 12px;
            color: #6a6765;
        }
        .login-button-box{
            margin-top: 12px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
        }
        .login-button-box button{
            background-color: #f3c300;
            color: #ffffff;
            font-size: 16px;
            width: 405px;
            height: 40px;
            margin-left: 18px;
            border: 1px solid #f8b100;
            border-radius: 4px;
        }
        .login-button-box button:hover{
    background-color: #f8b100;
}
        .login-button-box button:active{
    background-color: #f8b100;
}
        .logon-box{
    margin-top: 20px;
    text-align: center;
}
        .logon-box a{
    margin: 30px;
    color: #222222;
    font-size: 13px;
    text-decoration: none;
}
        .logon-box a:hover{
    color: #f8b100;
}
        .logon-box a:active{
    color: #f8b100;
}
        .tab-wrapper {
            margin: 60px auto;
            width: 70%;
            max-width:500px;
        }

        .tab-menu li {
            position:relative;
            background-color: #fff;
            color:#bcbcbc;
            display: inline-block;
            padding: 20px 40px;
            opacity: 0.8;
            cursor:pointer;
            z-index:0;
        }

        .tab-menu li:hover {
            color:#464646;
        }

        .tab-menu li.active {
            color:#464646;
            opacity: 1;
        }

        .tab-menu li.active:hover {
            color:#464646;
        }

        .tab-content>div {
            background-color: #fff;
            box-sizing:border-box;
            width: 100%;
            padding: 30px;
            min-height:200px;
        }

        .line {
            position:absolute;
            width: 0;
            height: 7px;
            background-color: #f8b100;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body style="margin-top: 150px;">
<div class="tab-wrapper">

    <ul class="tab-menu" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
        <li>账密登陆</li>
    </ul>

    <div class="tab-content">
        <div>
            <div class="login-header">
                <img src="../images/logo.png">
            </div>

            <form  id="form2" action="/user/passwordLogin" method="post">
                <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
                <div class="login-input-box">
                    <p class="tip" style="margin-top: 0px; margin-bottom: 0px;"><span id="uidt2" style="margin-left: 10px"></span></p>
                    <span class="icon icon-user"></span>
                    <input type="text" id="userId" name="userId" placeholder="Please enter your userId" onblur="checkAccount()">
                </div>
                <div class="login-input-box">
                    <span class="icon icon-password"></span>
                    <input type="password" name="password" placeholder="Please enter your password">
                </div>
                <div class="remember-box">
                    <label>
                        <input type="checkbox">&nbsp;Remember Me
                    </label>
                </div>
                <div class="login-button-box">
                    <button type="submit" >Login</button>
                </div>
                <div class="logon-box">
                    <a href="">忘记密码</a>
                    <a href="/user/registerpage" >注册</a>
                    <a th:href="@{/user/manager}">供应商登录</a>
                </div>
            </form>
        </div>
    </div><!-- //tab-content -->
</div><!-- //tab-wrapper -->
<script type="text/javascript">
    var wait = 120; // 短信验证码120秒后才可获取下一个
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }

        document.body.appendChild(temp);
        temp.submit();
    }

    function postCode(){
        var phone = {
            "phone": document.getElementById("phone").value
        };
        httpPost("/user/SMS", phone);
        return false;
    }

    function checkPhone(){
        var phone = document.getElementById('phone').value;
        if(!(/^1[34578]\d{9}$/.test(phone))){
            return document.getElementById('uidt').innerHTML = '请输入正确的手机号';
        }    else{return document.getElementById('uidt').innerHTML = '';}
    }

        function checkId(){
            var userId = document.getElementById('userId').value;
            if(userId.toString().length>11 || userId.toString().length < 5){
                return document.getElementById('uidt2').innerHTML = '请输入正确的用户ID';
            }    else{return document.getElementById('uidt2').innerHTML = '';}
        }

    $(document).ready(function() {

        var $wrapper = $('.tab-wrapper'),
            $allTabs = $wrapper.find('.tab-content > div'),
            $tabMenu = $wrapper.find('.tab-menu li'),
            $line = $('<div class="line"></div>').appendTo($tabMenu);

        $allTabs.not(':first-of-type').hide();
        $tabMenu.filter(':first-of-typa').find(':first').width('100%')

        $tabMenu.each(function(i) {
            $(this).attr('data-tab', 'tab'+i);
        });

        $allTabs.each(function(i) {
            $(this).attr('data-tab', 'tab'+i);
        });

        $tabMenu.on('click', function() {

            var dataTab = $(this).data('tab'),
                $getWrapper = $(this).closest($wrapper);

            $getWrapper.find($tabMenu).removeClass('active');
            $(this).addClass('active');

            $getWrapper.find('.line').width(0);
            $(this).find($line).animate({'width':'100%'}, 'fast');
            $getWrapper.find($allTabs).hide();
            $getWrapper.find($allTabs).filter('[data-tab='+dataTab+']').show();
        });

    });//end ready

</script>
</body>
</html>

